<template>
	<div style="position: relative;">
		<div class="kuang_k">
			<swiper dots-position="center" loop auto :list="demo06_list" :index="demo06_index"></swiper>
		</div>	
		<div class="jifen——kuang">
			<router-link to="/jfmx">
				<div class="jf_kuang">
					<div class="xiukuang">
						<img src="static/jifen.png">
						<p>可用积分<span>{{jifen}}</span></p>
					</div>
				</div>
			</router-link>
			<router-link to="/yuehuanjilu">
				<div class="jf_kuang" style="border:none;">
					<div class="xiukuang">
						<img src="static/duihuanjilu.png">
						<p>兑换记录</p>
					</div>
				</div>
			</router-link>
		</div>
		<div style="width: 100%;height: 8px;background: #F5F5F5;"></div>	
		<div class="jf_sp">
			<div class="jf_ww">全部商品</div>
		</div>
		<div style="position: relative;display: table;width: 100%;" v-for="(value,key) in list" v-show="!xianshi">
			<router-link :to="{path:'/jifenshangpingxiangqing',query:{id:value.goods_id}}">
				<div class="jf_box">
					<div class="tu1_tu1">
						<div class="jf_tupian1">
							<img :src="url + value.image" style="width: 75px;height: 75px;">
						</div>
						<div class="textxi">
							<p style="font-size: 13px;color: #4a4a4a;line-height: 16px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;">{{value.name}}</p>
							<p style="font-size: 12px;color: #9b9b9b;line-height: 12px;margin-top: 5px;">{{value.content}}</p>
					  		<p style="line-height: 20px;font-size: 22px;color: #FF2E22;margin-top: 9px;float: left;">{{value.attr.jifen}}</p>
					  		<p style="line-height: 13px;font-size: 13px;color: #FF2E22;margin-top: 15px;float: left;margin-left: 2px;">积分</p>
						</div>
					</div>
				</div>
			</router-link>
			<div class="gwc" @click="addgwc(value.goods_id)">
			 	<img src="static/cart_2.png">
			</div>
		</div>
		<div v-show="xianshi" style="width: 100%;margin-top: 80px;"><p style="font-size: 14px;line-height: 30px;text-align: center;">暂无记录</p></div>
		<router-link to="/gouwuche">
			<div class="guowuche">
				<div>
					<img src="static/cart_1.png">
				</div>
			</div>
		</router-link>
		<div style="width: 100%;height:50px;"></div>
		<loading :show="show1" :text="text1"></loading>
		<toast v-model="show2" type="text" :time="800" position="middle">{{tishi}}</toast>
	</div>
</template>

<script>
	import { Swiper, GroupTitle, SwiperItem, XButton, Divider, Loading } from 'vux'
	import { mapState, mapActions } from 'vuex'
	import axios from 'axios'
	export default {
		components: {
			Swiper,
			SwiperItem,
			GroupTitle,
			XButton,
			Divider,
			Loading,
			mapState, 
			mapActions
		},
		methods: {
			addgwc(id){
				console.log(id)
				var that = this;
				axios.post(that.url+"/home/Gwc/addCart",{openid:that.token,goods_id:id})
		        .then(function(res){
		            console.log(res);
		            if(res.data.status == 1){
		            	that.show2 = true;
		            	that.tishi = '加入购物车成功';
		            }
		        })
		        .catch(function(err){
		            console.log(err);
		        })
			}
		},
		created(){
			this.show1 = true;
			var that = this;
			axios.post(that.url+"/home/JifenGoods/jifenIndex",{openid:that.token})
	        .then(function(res){
	            console.log(res);
	            if(res.data.goodsinfo.length == 0){
	            	that.xianshi = true;
	            }else{
	            	that.xianshi = false;
	            	that.list = res.data.goodsinfo;
		            that.demo06_list = res.data.picture.map((item, index) => ({
						url:item.url,
						img:that.url + item.pic,
					}));
					that.jifen = res.data.keyongjifen;
					that.show1 = false;
	            }
	        })
	        .catch(function(err){
	            console.log(err);
	        })
		},
		data () {
			return {
				demo06_list:[],
				demo06_index: 0,
				list:'',
				show1:false,
				text1:'Loading...',
				jifen:'',
				show2:false,
				tishi:'',
				xianshi:false,
			}
		},
		computed:{
            ...mapState({
                token: state => state.Token.userToken()//获取用户Token
            }),
        }
	}
</script>

<style scoped>
body{
	position: relative;
}
.xiukuang {height: 20px;display: table;margin:10px auto;}
.xiukuang img {width: 20px;height: 20px;float: left;}
.xiukuang p {font-size: 12px;color: #303030;line-height: 20px;float: left;margin-left: 5px;}
.xiukuang p span {color:#00C850;margin-left:3px;}
.textxi {height: 75px;float: left;width: calc(100% - 80px);margin-left: 5px;}
.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
.kuang_k{
	width: 100%;
	height: 160px;
	
}
.kuang_k img{
	width: 100%;
	height: 160px;
}
.you_wen{
	width: 100%;
	padding: 10px 10px;
	margin-top: 10px;
	
}
.you_wen1{
	line-height: 21px;
	font-size: 15px;
	color:#333333;
}
.you_pq{
	width: 100%;
	padding: 10px 10px;
}
.you_pq1{
	line-height: 12px;
	font-size: 12px;
	float: left;
	color: #FF2E22;
	margin-top: 15px;
}

.you_pq2{
	line-height: 20px;
	font-size: 20px;
	float: left;
	color: #FF2E22;
	margin-left: 6px;
	margin-top: 8px;
}
.you_pq3{
	line-height: 12px;
	font-size: 13px;
	float: left;
	color: #9B9B9B;
	margin-left: 6px;
	margin-top: 13px;
}
.you_pq4{
	float: right;
	background: #00C850;
	color: #FFFFFF;
	border-radius: 4px;
	height: 26px;
	width:70px ;
	margin-top: 5px;
	border: none;
	outline: none;
}
.clearfix{
	float: none;
	clear: both;
}
.jifen——kuang{
	width: 100%;
	height: 40px;
	padding: 0px 15px;
	margin-top: 20px;
	background: #FFFFFF;
}
.jf_kuang{
	height: 40px;
	width: 50%;
	background: #FFFFFF;
	float: left;
	border-right:1px solid #EEEEEE;
	
}
.jf_kuang1{
	height: 40px;
	width: 50%;
	padding: 10px 15px;
	background: #FFFFFF;
	float: left;
	
	
}
.jf_tu{
	height: 24px;
	width: 24px;
	float: left;
}
.jf_wen{
	float: left;
	line-height: 20px;
	font-size: 14px;
	color: #333333;
	margin-left:10px;
}
.jf_wen1{
	float: left;
	line-height: 22px;
	font-size: 16px;
	color: #00C850;
	margin-left: 10px;
}
.jf_sp{
	width: 100%;
	height: 40px;
	padding: 10px 10px;
	border-bottom:1px solid #EEEEEE;
	background: #FFFFFF;
}
.jf_ww{
	line-height: 20px;
	font-size: 14px;
	color: #333333;
	background: #FFFFFF;
}
.jf_box{
	width: 100%;
	padding: 10px 10px;
	border-bottom: 1px solid #EEEEEE;
	background: #FFFFFF;
	display: table;
}
.jf_tupian1{
	height: 75px;
	width: 75px;
	float: left;
}
.jf_wenzi{margin-left: 80px;
		float: right;
		box-sizing: border-box;
		border: /*solid*/ yellow 1px;
		margin-top: -75px;
		
}
.jf_cheng_1{
	float: right;
	margin-top: 8px;
	height: 10px;
	width: 10px;
	margin-right: 10px;
	z-index: 9999999;
}
.guowuche{
	height: 30px;
	width: 30px;
	position: fixed;
	border-radius:50% ;
	border: 1px solid #c0c0c0;
	bottom: 60px;
	left: 5px;
	background-color: #fff;
}		
.guowuche img{
	display: block;
	width: 60%;
	margin-left: 5px;
    margin-top: 4px;
}	
.gwc{
	position: absolute;
	bottom:10px;
	right:15px;
	z-index: 10;
	display: table;
}
.gwc img {display: block;}
</style>
